<template>
    <div id="comment">
        <!-- 通过判断level是否等于commentIds的长度来判断是否为楼层的顶部，如果是则实行else，不是的就接着递归 -->
        <div class="comment-box clearfix" v-if="level !== commentIds.split(',').length">
            <div class="comment-info clearfix"></div>    
            <!-- 此时如果level === 1说明没有更多的楼层，递归结束,否则level-1，接着递归 -->
            <commentBox v-if="level !== 1" v-bind:levelComments="levelComments" v-bind:content="content" :level="level - 1"/>
        </div>
        <!-- 如果是楼层顶部则应用单独的样式 -->
        <div v-else class="comment-item">
            <!-- <img src="../assets/cat.jpg"> -->
            <img :src="commentItem[commentId].user.avatar ? `https://dev.apis.sh/PBX40wgC0/static/${commentItem[commentId].user.avatar}` : avatar" alt="">
            <div class="inner-box">
                <div class="com_title lf">
                    <span class="time">{{formattime(content.create_time)}}</span>
                </div>
                <div class="com_header">
                    <p class="content">{{content.content}}</p>
                    <div class="thumbs_up gt">
                    <span class="against">
                        <img src="../assets/icon_thumb_down.png">
                        <span class="badhand">{{content.against}}</span>
                    </span>
                    <span class="vote">
                        <img src="../assets/icon_thumb_up.png">
                        <span class="goodhand">{{content.vote}}</span>
                    </span>
                    <span class="reply">
                        <img src="../assets/icon_comment.png">
                    </span>
                    </div>
                    <div v-show="replyShow" class="clearfix">
                        <textarea class="replyBox" placeholder="请输入回复内容" v-model="replyValue"></textarea>
                        <div class="replyBtn gt">
                            <button type="button" class="rep" v-show="havenLogin">发表</button>
                        </div>
                    </div>
                </div>                
                <!-- 顶楼盖完后递归下一层楼,如果楼层只有一层则递归结束，否则level-1接着递归 -->
                <commentBox v-bind:levelComments="levelComments" v-bind:content="content" v-bind:level="content.split(',').length"/>
            </div>
        </div>
    </div>
</template>
<script>
import { getComment } from '../api/example'
import commentBox from './my_commentLevel'

export default {
    name:'comment',
    data(){
        return{
            show:true,
            page:1
        }
    },
    props:['commentItem','commentIds','level'],
    methods:{
        loadComment:function(){
            getComment(this.page).then(res =>{
                if(res.data.code==='success'){
                    console.log(res.data);
                }else{
                    console.log(res.data);
                }
            })
        }
    },
}
</script>
<style scoped>
    #comment{
        width:896px;
        height:800px;
        padding:21.5px 30.3px 31.8px 29.7px;
    }
</style>
